* {
  margin : 0;
  padding: 0;
}

body {
  font-size  : 15px;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.leftside {
  background-color: #313a46;
  width           : 240px;
  position        : fixed;
  bottom          : 0;
  top             : 0;
  box-shadow      : 0 0 35px 0 rgb(154 161 171 / 15%);
}


.logo {
  display    : block;
  width      : 100%;
  height: 70px;
  text-align : center;
}

.logo img {
  line-height: 40px;
  height: 40px;
  margin-top: 20px;
}

/* 侧边栏导航 */
.nav {
  padding: 10px 0;
}

.nav a {
  display: block;
  color  : #8391a2;
  padding: 8px 30px;
  font-family: '微软雅黑';
  font-weight: 500;
}

.nav ul a {
  padding-left: 45px;
  font-size: 13px;
}

.iconfont {
  margin-right: 10px;
}

.nav .active {
  color           : #fff;
  background-color: #0d6efd;
}

.nav .toggle {
  float: right;
  transform: rotate(-90deg);
  /* transform-origin   : center; */

  transition: 0.5s;
}
.nav .toggleone {
  transform: rotate(0deg);
}

.nav ul {
  display: none;
}
/* 选择了标签ul 身上必须有 show class */
.nav ul.show{
  display: block;
}

@keyframes close {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-90deg);
  }
}

.close {
  animation: close 0.4s forwards;
}

@keyframes open {
  0% {
    transform: rotate(-90deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.open {
  animation: open 0.4s forwards;
}

/* 右侧区 */
.right {
  position      : fixed;
  left          : 240px;
  top           : 0;
  bottom        : 0;
  right         : 0;
  display       : flex;
  flex-direction: column;
}

.top {
  height         : 70px;
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}




.top .iconfont {
  font-size  : 24px;
  color      : #313a46;
  line-height: 70px;
  cursor: pointer;
}

.menu {
  width     : 60px;
  text-align: center;
}

.search {
  width      : 550px;
  display    : flex;
  align-items: center;
}

.search input {
  border          : 0 none;
  outline         : none;
  height          : 40px;
  background-color: #f1f1f1;
  border-radius   : 5px 0 0 5px;
  padding-left    : 8px;
  width           : 220px;
  color           : #fefeff;
}

.search button {
  border          : 0 none;
  outline         : none;
  height          : 40px;
  background-color: #0d6efd;
  border-radius   : 0 5px 5px 0;
  width           : 80px;
  color           : #fefeff
}

.init {
  width: 100px;
  border-radius: 4px;
  background-color: #0d6efd;
  font-size: 12px;
  color: #fff;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
}

.user {
  width          : 130px;
  display        : flex;
  justify-content: center;
  align-items    : center;
  font-size      : 14px;
  color          : #6d767e;
}

.logout a {
  width: 110px;
  display        : flex;
  justify-content: center;
  align-items    : center;
  font-size      : 14px;
  color          : #6d767e;
}

.avatar {
  height       : 32px;
  width        : 32px;
  overflow     : hidden;
  border-radius: 50%;
  margin-right : 8px;
}

.content {
  flex: 1;
}

iframe {
  width : 100%;
  height: 100%;
}